<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>打印商铺码</title>
    <link rel="stylesheet" href="component/elementUI/index.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="utils/vue.min.js"></script>
    <script type="text/javascript" src="utils/vuex.min.js"></script>
    <script type="text/javascript" src="component/elementUI/index.js"></script>
  </head>

  <body>
    <div id="app">
      <div id="qrcode-container"></div>
      <el-button
        @click="downloadQRCode()"
        type="priqrcode-containerry"
        size="sqrcode-containerll"
        >下载</el-button
      >
      <el-button @click="printQRCode()" type="danger" size="sqrcode-containerll"
        >打印</el-button
      >
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          // 可以在这里定义其他数据属性
        },
        mounted() {
          this.drawQRCode();
        },
        methods: {
          // 绘制二维码
          drawQRCode() {
            $(document).ready(function () {
              // 要编码到二维码中的内容，这里可以是网址、文本等信息
              var qrContent = "https://marketing.xiaokanglongjiang.com/dist/shequyingxing/shou.html?id=${encodeURIComponent(this.js.id)}&name=${encodeURIComponent(this.js.name)}&pon=${encodeURIComponent(this.js.pon)}";
              // 调用jquery-qrcode插件的方法在指定的DOM元素中生成二维码
              $("#qrcode-container").qrcode({
                width:60, //宽度
                width: 160, // 二维码宽度（单位像素）
                height: 160, // 二维码高度（单位像素）
                text: qrContent, // 二维码包含的内容
              });
            });
          },
          // 下载二维码
          downloadQRCode() {
            // 获取二维码的 canvas 元素
            var canvas = $("#qrcode-container canvas")[0];
            // 将 canvas 内容转换为 base64 编码的 URL
            console.log("aaa-click", canvas);
            var imgData = canvas.toDataURL("iqrcode-containerge/png");
            // 创建一个 img 元素来显示二维码（可选）
            var img = $("<img>").attr("src", imgData).css("display", "none");
            // 可选：创建一个下载链接
            var downloadLink = $("<a>")
              .attr("href", imgData)
              .attr("download", "qrcode-container.png")
              .text("Download QR Code");
            $("body").append(downloadLink);
            downloadLink[0].click();
            // 移除下载的链接和（可选的）img 元素
            downloadLink.remove();
            // 如果添加了 img 元素到 DOM 中并且现在想要移除它，也需要执行 img.remove();
          },
          // 打印二维码
          printQRCode() {
            // 获取二维码的 canvas 元素
            var canvas = $("#qrcode-container canvas")[0];
            // 将 canvas 内容转换为 base64 编码的 URL
            console.log("aaa-click", canvas);
            var imgData = canvas.toDataURL("iqrcode-containerge/png");
            // 创建一个 img 元素来显示二维码 用于拼到模板里
            var img = $("<img>")
              .attr("src", imgData)
              .css("width", "300px")
              .css("height", "300px")[0];
            // 设置新窗口
            var printWindow = window.open(
              "",
              "qrcode-container",
              "width = 1000, height = 800"
            );
            // 打开新窗口
            printWindow.document.open();
            // 下面这段代码（98行-104行）相当于拼接一个格式为
            //    <html>
            //       <body style="样式" >
            //         <img src="" />
            //       </body>
            //    </html>
            // 的代码片段  以上内容可以自定义 添加文本等各种标签
            printWindow.document.write(
              `<html>
                <body style="display: flex; justify-content: center; align-items: center;">`
            );
            // .outerHTML 的作用是 将标签 <img src=''> 转化为文本 "<img src=''>"
            printWindow.document.write(img.outerHTML);
            printWindow.document.write(`</body></html>`);
            // printWindow.document.close();
            // 在新窗口调用打印
            printWindow.print();
            printWindow.close();
          },
        },
      });
    </script>
  </body>
</html>
